<template>
  <div class="user-login-style">
    <div class="component-inner-div">
      <!-- 四角样式 -->
      <div class="the-four-border the-four-border-01" />
      <div class="the-four-border the-four-border-02" />
      <div class="the-four-border the-four-border-03" />
      <div class="the-four-border the-four-border-04" />
      <!-- 四角样式 -->

      <!-- 标题栏 -->
      <div class="title">
        <div class="point-icon" />
        <span>用户登录</span>
      </div>
      <!-- 标题栏 -->

      <!-- 内容 -->
      <div class="content">
        <el-input
          class="input-style"
          placeholder="用户"
        >
          <img
            slot="prefix"
            class="user-icon"
            :src="require('@/assets/images/jjxt/index/jjxt-index-username-icon.png')"
          >
        </el-input>
        <el-input
          class="input-style"
          placeholder="密码"
        >
          <img
            slot="prefix"
            class="user-icon"
            :src="require('@/assets/images/jjxt/index/jjxt-index-password-icon.png')"
          >
        </el-input>
        <el-button class="login-btn" type="primary" round>登 录</el-button>
      </div>
      <!-- 内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {

    };
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-input__prefix {
  align-items: center;
  display: flex;
  width: 30px;
}

::v-deep .el-input--prefix .el-input__inner {
  padding-left: 40px;
  background-color: rgba($color: #223c66, $alpha: 0.58);
  border: 1px solid #0b62a3;
  height: 38px;
}

.user-login-style {
  color: white;
  width: 470px;
  height: 275px;
  box-sizing: border-box;
  .component-inner-div {
    border: 2px solid #122a57;
    height: 100%;
    background-color: rgba($color: #0b1945, $alpha: 0.8);
    box-sizing: border-box;
    .title {
      font-size: 20px;
      padding: 0;
      height: 70px;
      align-items: center;
      display: flex;
      .point-icon {
        background-color: white;
        height: 10px;
        width: 10px;
        margin: 0 10px 0 17px;
      }
    }
    .content {
      padding: 0 46px 0 46px;
      .input-style {
        margin-bottom: 20px;
        .user-icon {
          margin: 0 auto;
        }
      }
      .login-btn {
        margin-top: 5px;
        width: 100%;
        height: 38px;
      }
    }
  }
}
</style>
